<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    on-ok="handleOk"
    switch-fullscreen
    :footer="null"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <article-register-form ref="articleRegisterForm" @ok="handleCancel" />
    <div
      :style="{
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '16px 16px 0 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" @click="handleOk">
        提交
      </a-button>
    </div>
  </a-modal>
<!--  <a-drawer-->
<!--    title="用户注册"-->
<!--    :width="620"-->
<!--    :visible="visible"-->
<!--    :body-style="{ paddingBottom: '80px' }"-->
<!--    @close="handleCancel"-->
<!--  >-->
<!--   -->
<!--  </a-drawer>-->
</template>

<script>
import ArticleRegisterForm from './ArticleRegisterForm'

export default {
  name: 'ArticleRegister',
  components: {
    ArticleRegisterForm,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      title: '用户注册',
      width: 600,
      visible: false,
      disableSubmit: false,
      loading: false
    }
  },
  computed: {},
  methods: {
    register() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.articleRegisterForm.add()
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.$nextTick(() => {
        this.$refs.articleRegisterForm.submitForm()
      })
    },
  }
}
</script>

<style scoped>

</style>
